import { Component, Vue } from 'vue-property-decorator'
import style from '../News/News.less'
import styles from './NewsDetail.less'
import { Action } from 'vuex-class'
@Component
export default class NewsDetail extends Vue {
  private data: any = {}

  private loading: boolean = false
  private id: any = null

  @Action('homepage/getNewsDetail') private getNewsDetail!: any

  private render() {
    return (
      <div class={{ [style.container]: true, [styles.container]: true }}>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to={{ path: '/homepage/first' }}>
            首页
          </el-breadcrumb-item>
          <el-breadcrumb-item to={{ path: '/homepage/news' }}>
            公告通知
          </el-breadcrumb-item>
          <el-breadcrumb-item>公告通知详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div class={style.content} v-loading={this.loading}>
          <p class={styles.header}>
            <p class={styles.title}>{this.data.title}</p>
            <p class={styles.author}>
              <span class={styles.authorTitle} title={this.data.author}>
                作者：{this.data.author}
              </span>
              <span class="ml20">发布时间：{this.data.publishTime}</span>
            </p>
          </p>
          <div
            class={{ [styles.content]: true, 'w-e-text': true }}
            {...{ domProps: { innerHTML: this.data.content } }}
          />
        </div>
      </div>
    )
  }

  async query() {
    this.loading = true
    this.getNewsDetail({ id: this.id })
      .then((res: any) => {
        this.loading = false
        this.data = res
      })
      .catch((e: any) => {
        this.loading = false
      })
  }
  private mounted() {
    this.id = this.$route.query.id || ''
    if (this.id) {
      this.query()
    }
  }
}
